<template>
  <div>
    <div class="title hy-lingxingti top-title-words">{{ title }}</div>
    <div class="title title-bg top-title-bg"></div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 822.68 92.32"
      class="svg-top-center"
    >
      <linearGradient
        id="linearGradient1"
        x1="169.68"
        y1="69.5"
        x2="660.32"
        y2="69.5"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#035ef0" stop-opacity="0" />
        <stop offset="0.07" stop-color="#035ef0" />
        <stop offset="0.2" stop-color="#035ef0" />
        <stop offset="0.82" stop-color="#035ef0" />
        <stop offset="0.94" stop-color="#035ef0" />
        <stop offset="1" stop-color="#035ef0" stop-opacity="0" />
      </linearGradient>
      <linearGradient
        id="linearGradient2"
        x1="0.5"
        y1="20"
        x2="822.5"
        y2="20"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#035ef0" stop-opacity="0" />
        <stop offset="0.27" stop-color="#035ef0" />
        <stop offset="0.28" stop-color="#035ef0" />
        <stop offset="0.75" stop-color="#035ef0" />
        <stop offset="0.75" stop-color="#035ef0" />
        <stop offset="0.99" stop-color="#035ef0" stop-opacity="0" />
        <stop offset="1" stop-color="#035ef0" />
      </linearGradient>
      <linearGradient id="linearGradient3" y1="28" y2="28" xlink:href="#linearGradient2" />
      <linearGradient
        id="linearGradient4"
        x1="36.5"
        y1="77.5"
        x2="786.5"
        y2="77.5"
        xlink:href="#linearGradient2"
      />
      <path
        id="path-top-center-1"
        class="cls-1"
        d="M660.32,55.5c-29,0-40.67,28-75.82,28h-341c-36.94,0-45.34-28-73.82-28"
        transform="translate(-0.5)"
      />
      <path
        id="path-top-center-2"
        class="cls-2"
        d="M.5,39.5H115.68c29,0,40.67-39,75.82-39h441c36.94,0,45.34,39,73.82,39H822.5"
        transform="translate(-0.5)"
      />
      <path
        id="path-top-center-3"
        class="cls-3"
        d="M.5,47.5H120.68c29,0,40.67-39,75.82-39h431c36.94,0,45.34,39,73.82,39H822.5"
        transform="translate(-0.5)"
      />
      <path
        id="path-top-center-4"
        class="cls-4"
        d="M198.5,16.5v-1h80v1Zm91,0v-1h244v1Zm256,0v-1h80v1Z"
        transform="translate(-0.5)"
      />
      <path
        id="path-top-center-5"
        class="cls-5"
        d="M786.5,63.5H666.32c-29,0-40.67,28-75.82,28h-353c-36.94,0-45.34-28-73.82-28H36.5"
        transform="translate(-0.5)"
      />
      <path
        id="path-top-center-6"
        data-name=" 1"
        class="cls-6"
        d="M145.5,45.5c15.78,0,28.92-30,54-30-20.39,16.62-12.95,19.84-20,30Zm533,0c-15.79,0-28.93-30-54-30,20.39,16.62,13,19.84,20,30Z"
        transform="translate(-0.5)"
      />
    </svg>
  </div>
</template>
<script>
export default {
  name: 'topCenter',
  data() {
    return {
      title: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      let routeName = this.$route.name
      this.fillTitle(routeName, 'mounted')
    })
  },
  watch: {
    $route: {
      handler: function(to, from) {
        this.fillTitle(to.name)
      }
    }
  },
  methods: {
    init() {
      let tl = new TimelineMax()
      let tw1 = TweenMax.from('#path-top-center-1', 1, {
        drawSVG: '50% 50%',
        ease: Power2.easeInOut
      })
      let tw2 = TweenMax.from('#path-top-center-2', 1, {
        drawSVG: '50% 50%',
        ease: Power2.easeInOut
      })
      let tw3 = TweenMax.from('#path-top-center-3', 1, {
        drawSVG: '-100% -100%',
        ease: Power2.easeInOut
      })
      let tw7 = TweenMax.from('#path-top-center-5', 1, {
        drawSVG: '50% 50%',
        ease: Power2.easeInOut
      })
      let tw4 = TweenMax.from('.svg-top-center .cls-4', 1, {
        drawSVG: '50% 50%',
        ease: Power2.easeInOut
      })
      let tw8 = TweenMax.to('.svg-top-center .cls-6', 1, {
        opacity: 1
      })
      let tw5 = TweenMax.to('.top-title-words', 0.5, {
        opacity: 1,
        ease: Power4.easeInOut
      })
      let tw6 = TweenMax.to('.top-title-bg', 0.3, {
        opacity: 1,
        height: 91,
        ease: Power4.easeInOut
      })
      let tw0 = TweenMax.set('.svg-top-center', { opacity: 1 })
      tl.add(tw0, 0)
        .add(tw1, 0.1)
        .add(tw2, 0)
        .add(tw3, 0.1)
        .add(tw4, 0.2)
        .add(tw5, 0.3)
        .add(tw6, 0.5)
        .add(tw7, 0)
        .add(tw8, 0.6)
      return tl
    },
    fillTitle(name, flag) {
      switch (name) {
        case 'firstPage':
          this.title = '地图展示'
          break
        case 'secondPage':
          this.title = 'Tab副标题2'
          break
      }
      if (flag == 'mounted') return
      TweenMax.fromTo(
        '.top-title-words',
        0.4,
        { opacity: 0 },
        { opacity: 1, ease: Power2.easeInOut }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/_lib-variable';
.svg-top-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 36px;
  width: 822px;
  height: 92px;
  opacity: 0;
}
.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5 {
  fill: none;
}
.cls-1 {
  stroke: url(#linearGradient1);
}
.cls-2 {
  stroke: url(#linearGradient2);
}
.cls-3 {
  stroke: url(#linearGradient3);
}
.cls-4 {
  stroke: #035ef0;
}
.cls-5 {
  stroke: url(#linearGradient4);
}
.cls-6 {
  fill: #035ef0;
  fill-rule: evenodd;
  opacity: 0;
}
.title,
.title-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 656px;
  height: 97px;
  opacity: 0;
}
.title {
  font-size: 40px;
  line-height: 109px;
  text-align: center;
  top: 30px;
  // background: linear-gradient(to bottom, #ccc 50%, #25a0ff 100%);
  // -webkit-background-clip: text;
  color: #fff;
  // text-shadow: 0px 0px 5px #ccc, 0px 0px 1px #25a0ff24;
  letter-spacing: 2px;
}
.title-bg {
  width: 591px;
  height: 0;
  background: url('../../assets/imgs/topTitle/title-bg.png') no-repeat;
}
</style>
